<template>
	<view>
		<view class="opt flex">
			<view class="del btn" v-if="Info.order_status == 0" @click="del">取消订单</view>
			<view v-if="Info.order_status == 0" class="payment btn" @click="zhifubaoPay">立即支付</view>
			<view class="del btn" v-if="Info.order_status == 1" @click="refund">申请退款</view>
			<view class="payment btn" v-if="Info.order_status == 1" @click="apply">立即使用</view>
			<view class="payment btn" v-if="Info.order_status == 3 || Info.order_status == 2" @click="customerService">联系客服</view>
		</view>
		<service ref="service" title="扫码添加客服"></service>
	</view>
</template>

<script>
	import service from '@/components/service/service.vue';
	export default {
		name: 'optview',
		components: {
			service,
		},
		props: {
			Info: {
				type: Object,
				default: () => {},
			},
			
		},
		data() {
			return {};
		},
		methods: {
			async del() {
				const { data } = await this.$api.OrderDel({ id: this.Info.oid });
				this.showToastMsg('取消成功', true);
			},
			async zhifubaoPay() {
				const { data } = await this.$api.payUnifiedpay({
					url: this.networkIndistinguishable + '/pages/my/order/details/details?id=' + this.Info.oid,
					order_id: this.Info.oid,
				});
				document.querySelector('body').innerHTML = data;
				document.forms[0].submit();
			},
			async refund() {
				const { data } = await this.$api.OrderRefund({ id: this.Info.oid });
				this.showToastMsg('已提交申请', true);
			},
			apply() {
				uni.navigateTo({
					url: '/pages/my/admissionTicket/details/details?oid=' +  this.Info.oid,
				});
			},
			customerService() {
				this.$refs.service.open();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.opt {
		width: 100%;
		height: 100rpx;
		background: $content-bg-colcor;
		position: fixed;
		bottom: 0;
		left: 0;
		justify-content: flex-end;
		align-items: center;

		.btn {
			width: 180rpx;
			height: 60rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1rpx solid #999999;
			color: #999999;
			margin-right: $margin-width;
		}

		.payment {
			border-color: $price-color;
			background-color: $price-color;
			color: $txt-color;
		}

		.cancel {
			margin-right: $submargin-width;
			color: $title-colcor;
		}
	}
</style>
